<!--
 * @Author: wangshuguang
 * @Date: 2022-03-11 10:46:34
 * @LastEditTime: 2022-03-31 13:19:31
 * @LastEditors: wangshuguang
 * @Description: 会员储值记录
-->
<template>
  <div class="memberSharedList">
    <HeaderComp title="会员储值记录" />
    <!-- 导航栏 -->
    <van-tabs v-model="dateType" @change="tabChange" title-active-color='#FFB72F' color='#FFB72F'>
      <van-tab :title="menu.label" :name="menu.value" v-for="menu of menuTab" :key="menu.value"></van-tab>
    </van-tabs>
    <!-- 数据台 -->
    <div class="dataCard">
      <div class="card">
        <div class="cardItem" style="margin-right:5px;">
			<div class="num">{{totalData.allTotal}}</div>
          <div class="label">累计会员储值(元)</div>
          
        </div>
        <div class="cardItem" style="margin-right:5px;">
			 <div class="num">{{totalData.totalAmount}}</div>
          <div class="label">{{ dateTypeText }}储值金额(元)</div>
         
        </div>
        <div class="cardItem">
			 <div class="num">{{totalData.totalCount}}</div>
          <div class="label">{{ dateTypeText }}储值笔数(笔)</div>
         
        </div>
      </div>
     <!-- <div class="dataTime">统计数据截止{{ dateFtt('yyyy-MM-dd hh:mm', new Date()) }}</div> -->
    </div>
    <!-- 列表展示 -->
      <div class="dataList">
      <div class="head">
        <div class="title">会员储值记录</div>
        <div class="listMenu">
          <img @click="changeListType('list')" :src="nowListActive == 'list' ? imgIcon['listActive']: imgIcon['list']" alt="">
          <img @click="changeListType('line')" :src="nowListActive == 'line' ? imgIcon['lineActive']: imgIcon['line']" alt="">
        </div>
      </div>
      <van-list
        class="bottomContent listContent" 
        v-model="loading"
        offset="100"
        :finished="finished"
        finished-text="没有更多了"
        @load="getListData">
        <!-- 数据列表 -->
        <div class="listContent" v-if="nowListActive == 'list'">
          <div @click="toDetail(item)" v-for="item of dataList" :key="item.num" class="listItem">
            <div>
              <div class="name">会员{{item.vipName}}储值</div>
             <!-- <div class="date">{{dateFtt('yyyy-MM-dd hh:mm:ss', new Date(item.tranTime))}}</div> -->
			  <div class="date">{{item.tranTime}}</div>
			  
            </div>
            <div class="num">+{{item.saveAmount}}</div>
          </div>
        </div>
        <!-- 图标内容 -->
        <div class="chartContent" v-else style="margin-bottom: 20px;">
          <memberSharedListChrars :baseData="lineData"/>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>

import { 
  queryVipSaveInfoPage, 
  queryVipSaveLineChart,
  queryVipCardTypeNum,
  queryVipTotalAmount,
  querySaveTotalAmountNum,
} from "@/api/flow/index";
import memberSharedListChrars from "../components/memberSharedListChrars.vue";
import { dateFtt } from "@/utils/utils";
import { mapGetters } from "vuex";
export default {
  components:{
    memberSharedListChrars
  },
  data(){
    return {
      dateFtt,
      nowListActive: 'list',
      dateType: '',
      dateTypeText: '今天',
      imgIcon:{
        line:require('../../../assets/img/flow/line.png'),
        lineActive:require('../../../assets/img/flow/line_active.png'),
        list:require('../../../assets/img/flow/list.png'),
        listActive:require('../../../assets/img/flow/list_active.png'),
      },
      totalData:{
        num: 1000,
		allTotal:0,
		totalAmount:0,
		totalCount:0
      },
      loading: false,
      finished: false,
      nowMenu:{},
      lineData: [],
      menuTab:[
        { label: '今天', value: '' },
        { label: '昨天', value: 'yesterday' },
        { label: '近七天', value: 'week' },
        { label: '近30天', value: 'thirty' },
        { label: '本月', value: 'month' },
      ],
      dataList: [],
      pageObj:{
        pageSize: 10,
        pageNum: 1
      },
    }
  },
  computed:{
    queryData(){
      return this.$route.query
    },
    ...mapGetters(['flowQueryData'])
  },
  mounted(){
    this.getBaseData()
    this.getListData()
  },
  methods:{
    tabChange(value, title){
      this.dateType = value
      this.dateTypeText = title
      // 初始化列表数据
      this.dataList = []
      this.pageObj.pageNum = 1
      this.finished = false
      this.getBaseData()
      this.getListData()
    },
    toDetail(item){
      this.$router.push({
        path:'/memberSharedListDetail',
        query:{...item}
      })
    },
    changeListType(key){
      if(this.nowListActive != key){
        this.nowListActive = key
      }
    },
    changeMenu(item){
      this.nowMenu = item
      console.log('nowMenu',this.nowMenu)
    },
    getBaseData(){
      const { merchantId } = this.flowQueryData
      let obj = {
        pageNum: this.pageObj.pageNum,
        pageSize: this.pageObj.pageSize,
        dateType: this.dateType,
        merchantId,
      }
      this.loading = true
	  queryVipTotalAmount(obj).then(res => {
	    this.totalData.allTotal = res.data.data
	  		console.log('累计储值记录',this.totalData.allTotal)
	  })
      querySaveTotalAmountNum(obj).then(res => {
        console.log('querySaveTotalAmountNum总体',res)
        this.totalData = {
          ...this.totalData,
          ...res.data.data
        }
      })
     
      // 查询储值记录 折线图
      queryVipSaveLineChart(obj).then(res => {
        console.log('queryVipSaveLineChart',res)
        this.lineData = res.data.data
      })
    },
    getListData(){
      const { merchantId } = this.flowQueryData
      let obj = {
        pageNum: this.pageObj.pageNum,
        pageSize: this.pageObj.pageSize,
        dateType: this.dateType,
        merchantId,
      }
      this.loading = true
      // 查询储值记录
      queryVipSaveInfoPage(obj).then(res => {
        console.log('queryVipSaveInfoPage查询储值记录',res)
        const { list, total } = res.data.data
        this.dataList.push(...list)
        this.pageObj.pageNum += 1
        this.loading = false
        if(this.dataList.length == total){
          this.finished = true
        }
        console.log('queryVipSaveInfoPage',this.dataList,total)
        console.log('finished',this.finished)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.memberSharedList{
  background: #F9F9F9;
  display: flex;
  flex-direction: column;
  height: 100%;
  .dataCard{
    padding: 30px;
    .dataTime{
      font-size: 28px;
      font-weight: 500;
      color: #131313;
      opacity: 0.6;
      margin-top: 29px;
    }
    .card{
      background: #FFFFFF;
      border: 1px solid #F8F3E8;
      box-shadow: 0px 0px 10px 0px rgba(34, 34, 34, 0.1);
      border-radius: 15px;
      display: flex;
      justify-content: space-evenly;
      padding: 50px 30px;
      .cardItem{
        text-align: center;
        .num{
          font-size: 38px;
          font-weight: 500;
          color: #131313;
        }
        .label{
          font-size: 26px;
          font-weight: 500;
          color: #131313;
          opacity: 0.6;
          margin-bottom: 10px;
        }
      }
    }
  }
  .dataList{
    padding: 30px;
    background: #fff;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .head{
      display: flex;
      justify-content: space-between;
      .title{
        font-size: 32px;
        font-weight: bold;
        color: #131313;
      }
      .listMenu{
        img{
          margin-left: 30px;
          width: 50px;
        }
      }
    }
    .listContent{
      flex: 1;
      overflow: auto;
      .listItem{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 0;
        border-bottom: 1px solid #E7E7E7;
        .name{
          font-size: 32px;
          font-weight: 500;
          color: #131313;
        }
        .date{
          font-size: 28px;
          font-weight: 400;
          color: #3D3D3D;
          opacity: 0.8;
          margin-top: 30px;
        }
        .num{
          font-size: 34px;
          font-weight: 500;
          color: #131313;
        }
      }
    }
    .chartContent{
      height: 600px;
    }
  }
}
</style>
